<%@page contentType="text/html;charset=utf-8" isELIgnored="false" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet" />

    <!--这两个js文件一定要注意顺序-->
    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/bootstrap-table.js"></script>
    <style type="text/css">

    </style>
    <script type="text/javascript">
        $(function(){

            $("#myTable").bootstrapTable({
                //请求地址
                url:"selectAll.do",

                //分页方式：
                // server后台做分页（页面显示的数据就是直接从数据库中获取到的当前页的数据）
                //client前台做分页（所有的数据都从数据库中获取到，在页面截取显示）
                sidePagination:"server",
                //有了这个属性：要在后台做分页；
                //bootstraptable会发送两个参数
                // offset:偏移量，从这个位置开始显示（不包括这个位置）
                // limit:每页显示数据的条数
                //MySQL数据库做分页：limit start,pageSize
                //在java控制器中，要接收这两个参数；必须定义参数名offset/limit

                //显示分页工具栏
                pagination:true,
                // 列属性,要显示多少列数据
                columns:[
                    {title:"编号",field:"cityId"},
                    {title:"代号",field:"code"},
                    {title:"名字",field:"cityName"},
                    // formatter:格式化函数,一列加上formatter就会显示formatter函数的返回值
                    // value:单元格字段值
                    // row:行对象
                    // index:行号,行索引
                    {title:"操作",formatter:function (value,row,index) {
                        return "<button type=\"button\" class=\"btn btn-danger\">删除</button>"+
                            "          <button type=\"button\" class=\"btn btn-info\" onclick='toOpenUpdate("+row.cityId+")'>修改</button>";
                        }
                    }
                ]
            });
        });

        function toOpenUpdate(cityId) {
            $.ajax({
                url:"selectOne.do",
                data:"cityId="+cityId,
                success:function (data) {
                    // 把数据写入模态框
                    $("#code").val(data.code);
                    $("#cityName").val(data.cityName);
                    // 显示模态框
                    $("#updateUserModal").modal("show");
                }
            })
        }
        function doSubmit() {
            // 获取数据
            var cityId=$("#cityId").val();
            var code=$("code").val();
            var cityName=$("cityName").val();
            $.ajax({
                url:"update.do",
                data:{"cityId":cityId,"code":code,"cityName":cityName},
                success:function (data) {
                    if(data.isUpdate=="修改成功"){
                        // 关闭模态框
                        $("#updateUserModal").modal("hide");
                        // 刷新table
                        $("#myTable").bootstrapTable("refresh");
                    }
                }
            })
        }

        function openAddUserModal() {
            $("#addUserModal").modal("show");
        }
    </script>
</head>
<body>
<div class="modal" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!--header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>

            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<%--<button type="button" class="btn btn-info" onclick="openAddUserModal()">添加城市</button>--%>
<%--<div class="modal fade"  role="dialog" id="addUserModal">--%>
    <%--<div class="modal-dialog" role="document">--%>
        <%--<div class="modal-content">--%>
            <%--<div class="modal-header">--%>
                <%--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>--%>
                <%--<h4 class="modal-title">新增城市</h4>--%>
            <%--</div>--%>

            <%--<div class="modal-body">--%>
                <%--<form class="form-horizontal" id="addForm">--%>
                    <%--<div class="form-group">--%>
                        <%--<label for="code" class="col-md-2 control-label">代号：</label>--%>
                        <%--<div class="col-md-10">--%>
                            <%--<input type="text" class="form-control" id="code" placeholder="请输入代号">--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="form-group">--%>
                        <%--<label for="cityName" class="col-md-2 control-label">城市名：</label>--%>
                        <%--<div class="col-md-10">--%>
                            <%--<input type="text" class="form-control" id="cityName" placeholder="请输入城市名">--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</form>--%>
            <%--</div>--%>

            <%--<div class="modal-footer">--%>
                <%--<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>--%>
                <%--<button type="button" class="btn btn-primary">添加</button>--%>
            <%--</div>--%>

        <%--</div>--%>
    <%--</div>--%>
<%--</div>--%>

<div class="modal fade"  role="dialog" id="updateUserModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改城市信息</h4>
            </div>

            <div class="modal-body">
                <form class="form-horizontal" id="updateForm">
                    <div class="form-group">
                        <label for="cityId" class="col-md-2 control-label">编号</label>
                        <div class="col-md-10">
                            <input type="text" readonly class="form-control" name="cityId" id="cityId" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="col-md-2 control-label">代号</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" name="code" id="code">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cityName" class="col-md-2 control-label">城市名：</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" name="cityName" id="cityName" placeholder="请输入城市名">
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="doSubmit()">修改数据</button>
            </div>

        </div>
    </div>
</div>
<table id="myTable" class="table"></table>
</body>
</html>
